<template>
  <div class="hot-company">
    <div class="company-box">
      <!-- 头部 -->
      <div class="company-title">
        <h1>热门企业</h1>
      </div>
      <!-- 主要信息 -->
      <div class="company-row">
        <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
        <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
        <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
         <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
        <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
        <div class="company-col">
          <div class="col-top">
            <div class="leftImg">
              <img src="./images/1.jpg" alt="" />
            </div>
            <div class="right-info">
              <p>美团</p>
              <span>移动互联网</span>
              <span>D轮及以上</span>
            </div>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-temp">
            <ul>
              <li>
                <div class="recruit">
                  <div>
                    <span>高薪急招 理货员 龙岗</span>
                    <i></i>
                  </div>
                  <div>6-9k</div>
                </div>
                <div class="tag">
                  <span>深圳 龙岗区 平湖</span>
                  <span>经验不限</span>
                  <span>学历不限</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="col-btn">
            <a href="javascript:;">查看更多职位</a>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="company-footer">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LHotCompany",
};
</script>

<style lang="less" scoped>
.hot-company {
  width: 100%;
  margin-top: 60px;
  .company-box {
    width: 1200px;
    // border: 1px solid red;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .company-title {
      text-align: center;
      h1 {
        font-size: 32px;
        font-weight: 600;
        color: #222;
        line-height: 45px;
        margin-bottom: 30px;
      }
    }
    .company-row {
      height: 800px;
      // border: 1px solid aqua;
      // display: flex;
      .company-col{
        float: left;
        width: 398px;
        .col-top {
          display: flex;
          margin: 20px 10px 0 10px;
          background: #f7fafa;
          border-radius: 12px 12px 0 0;
          padding: 15px 0;
          .leftImg {
            flex: 2;
            text-align: center;
            img {
              height: 44px;
            }
          }
          .right-info {
            flex: 8;
            p {
              height: 22px;
              font-size: 16px;
              font-weight: 400;
              color: #222;
              line-height: 22px;
              margin: 0 0 4px 10px;
              padding: 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              transition: all linear 0.2s;
              cursor: pointer;
            }
            p:hover {
              color: #00d7c6;
            }
            span {
              height: 18px;
              font-size: 13px;
              font-weight: 400;
              color: #999;
              line-height: 18px;
              padding: 0 10px;
              border-right: 1px solid rgb(168, 168, 168);
              &:last-child {
                border-right: none;
              }
            }
          }
        }

        .col-temp {
          ul {
            padding: 12px 0;
            box-sizing: border-box;
            background: #f7fafa;
            margin: 0 10px;
            li {
              margin: 0 10px;
              cursor: pointer;
              .recruit {
                display: flex;
                justify-content: space-between;
                position: relative;
                margin: 0 10px;
                div:nth-of-type(1) {
                  width: 180px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  line-height: 22px;
                  font-size: 16px;
                  font-weight: 500;
                  color: #222;
                  transition: all linear 0.2s;
                }
                div:nth-of-type(2) {
                  white-space: nowrap;
                  font-size: 16px;
                  color: #fe574a;
                  margin-right: 20px;
                }
                i {
                  width: 16px;
                  height: 16px;
                  left: 55%;
                  position: absolute;
                  top: 4px;
                  background: url(https://img.bosszhipin.com/static/file/2022/tfguyqkgkb1651743005056.png)
                    0 -16px/16px auto no-repeat;
                  transition: all linear 0.2s;
                }
              }
              .tag {
                margin-top: 10px;
                span {
                  display: inline-block;
                  height: 18px;
                  font-size: 13px;
                  font-weight: 400;
                  color: #666;
                  line-height: 18px;
                  padding: 2px 10px;
                }
              }
            }
            li:hover div:nth-of-type(1) {
              color: #00d7c6;
            }
            li:hover i {
              background: url(https://img.bosszhipin.com/static/file/2022/tfguyqkgkb1651743005056.png)
                0 0/16px auto no-repeat;
            }
          }
        }
        .col-btn{
          padding: 10px 0;
          background: #f7fafa;
          margin: 0 10px;
          border-radius: 0 0 12px 12px;
          a{
            width: 122px;
            height: 30px;
            display: block;
            margin: 0 auto;
            line-height: 30px;
            border-radius: 8px;
            text-align: center;
            border: 1px solid rgba(0, 190, 189, 0.6);
            font-size: 14px;
            font-weight: 400;
            color: #00a6a7;
            transition: all 0.2s linear;
            &:hover{
              color: #fff;
              background-color: #00bebd;
              border-color: #00bebd;
            }
          }
        }
      }
    }
    .company-footer{
      width: 184px;
      line-height: 40px;
      text-align: center;
      margin-left: 508px;
      background: rgba(0, 190, 189, 0.1);
      border-radius: 8px;
      font-size:14px;
      font-weight: 400;
      color: #00a6a7;
      cursor: pointer;
      transition: all linear 0.2s;
      &:hover{
        background: #00bebd;
        color: #fff;
      }
    }
  }
}
</style>
